import React from 'react'
import PropTypes from 'prop-types'
import Emoji from './Emojis'
import {Link} from 'react-router-dom'
import { getID } from '../actions'



const Todo = ({onClick, completed, values, id}) => (
    <li className="listItem"
        >
        <input onChange={onClick} type="checkbox" checked={completed ? 'checked' : ''} />
        {values}
        <Link to={`${id}/edit/`}><i className="editDialog"><Emoji symbol="✏️"></Emoji>Edit</i></Link>
    </li>
)

Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    id: PropTypes.number.isRequired,
    values: PropTypes.string.isRequired
}

export default Todo;
